<template>
  <uni-popup ref="popup" type="center" @maskClick="close" :safe-area="false" mask-background-color="rgba(0,0,0,0.7)">
    <view class="loading-card">
      <view class="load-box hover-xuanzhuan">
        <image :src="urlConf + 'common/loading.svg'" mode="scaleToFill" style="width: 100%; height: 100%" />
        <image src="@/subPages/static/l1.png" mode="scaleToFill" class="load1" />
        <image src="@/subPages/static/l2.png" mode="scaleToFill" class="load2" />
        <image src="@/subPages/static/l3.png" mode="scaleToFill" class="load3" />
      </view>
      <view class="load-tips">
        <text>正在扫描资源库中</text>
        <view class="t1">{{ loadText }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { urlConf } from "@/config/resource";

const popup = ref();

const loadText = ref("");
let interFn = null;
const loadTextFn = () => {
  const n = ".";
  interFn = setInterval(() => {
    loadText.value += n;
    if (loadText.value.length > 3) {
      loadText.value = "";
    }
  }, 500);
};

const close = () => {
  clearInterval(interFn);
  popup.value.close();
};
const init = () => {
  popup.value.open();
  loadTextFn();
};

// 暴露
defineExpose({ open: init, close });
</script>

<style lang=scss scoped>
.loading-card {
  width: 650rpx;
  height: 600rpx;
  padding: 60rpx 124rpx;
  background: linear-gradient(180deg, #1f3bff 0%, #ffffff 100%);
  border-radius: 30rpx;
  @include borderBox;
  .load-box {
    width: 400rpx;
    height: 400rpx;
    position: relative;
    animation: rotate 4.5s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .load-tips {
    font-weight: 500;
    font-size: 36rpx;
    color: #000;
    padding-top: 30rpx;
    display: flex;
    align-items: center;
    padding-left: 40rpx;
  }
  .t1 {
    width: 30rpx;
  }

  .load1,
  .load2,
  .load3 {
    width: 80rpx;
    height: 80rpx;
    animation: scale 1.5s linear infinite;
  }
  @keyframes scale {
    50% {
      transform: scale(1.2);
    }
  }
  .load1 {
    position: absolute;
    left: 70rpx;
    top: 90rpx;
    animation-delay: 3.5s;
  }
  .load2 {
    position: absolute;
    left: 110rpx;
    bottom: 70rpx;
    animation-delay: 0.5s;
  }
  .load3 {
    position: absolute;
    right: 50rpx;
    top: 170rpx;
    animation-delay: 1.5s;
  }

  .hover-xuanzhuan {
    transform: rotate(360deg);
  }
}
</style>